<template>
  <el-dialog
    :title="title"
    :visible.sync="isShowDialog"
    :close-on-click-modal="false"
    :before-close="handleClose"
  >
    <div class="edit_dev">
      <el-transfer
        :titles="transferTitles"
        filterable
        :filter-method="filterMethod"
        filter-placeholder="请输入复检项"
        v-model="userGroupData.groupIds"
        :data="partsList"
        :props="{
        key: 'id',
        label: 'integrationName'
      }"
      >
      </el-transfer>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="handleClose">取 消</el-button>
      <el-button type="primary" @click="handleSubmit">提 交</el-button>
    </span>
  </el-dialog>
</template>

<script>
import {partsList,add} from '@/api/typeRecheckProject/typeRecheckProject'
export default {
  name: "userGroup",
  props: {
    isShowDialog: {
      type: Boolean,
      default: false
    },
    userGroupData: {
      type: Object,
      default: ()=>{
        return {}
      }
    }
  },
  data() {
    return {
      partsList: [],
      title: "复检项配置",
      transferTitles: ["未选择项目", "已选择项目"],
      filterMethod(query, item) {
        return item.partsName.indexOf(query) > -1;
      },
    }
  },
  created() {
    this.getAllJobList()
    console.log(this.userGroupData)
  },
  methods: {
    /** 查询操作 */
    async getAllJobList(){
      const data = await  partsList();
      this.partsList = data.data.result
    },
    /* 提交事件 */
    handleSubmit(){
      add(this.userGroupData).then(res=>{
        this.$message.success('提交完成')
        this.handleClose()
      })
      console.log(this.userGroupData)
    },
    /* 弹窗关闭事件 */
    handleClose(){
      this.$emit('closeGroupDialog')
    },
  }
}
</script>

<style scoped>
.edit_dev >>> .el-transfer-panel {
  width:350px;
  height: 450px;
}
</style>

